<template name="home">
	<view class="wrap">
		<view>
			<scroll-view scroll-y="true">
				<view v-for="item in scrollViewList" :key="item._id">
					<view v-for="item1 in item.children" :key="item1._id">
						<u-grid :col="3">
							<u-grid-item v-for="item2 in item1.children" :key="item2._id" @click="skipCommodityDetails(item2._id)">
								<u-icon :name="item2.icon" :size="170"></u-icon>
								<view class="grid-text">{{ item2.name }}</view>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</scroll-view>
		</view>
		<view><Footer></Footer></view>
	</view>
</template>

<script>
import footer from '../../components/footer/footer.vue';
export default {
	name: 'home',
	data() {
		return {
			scrollViewList: []
		};
	},
	components: {
		footer
	},
	onLoad() {
		
	},
	created() {
		this.getGoodImages();
	},
	methods: {
		// 获取轮播图片
		async getGoodImages() {
			const db = await uniCloud.database();
			const that = this;
			await db
				.collection('opendb-mall-categories')
				.get({
					getTree: {
						limitLevel: 10,
						startWith: "parent_id=='0'"
					}
				})
				.then(res => {
					// res 为数据库查询结果
					res.result.data.forEach(item => {
						that.scrollViewList.push(item);
					});
				})
				.catch(err => {
					// err.message 错误信息
					console.log(err);
					// err.code 错误码
				});
		},
		skipCommodityDetails(val) {
			 this.$store.state.inquireDataBase.rarent_id = val
			uni.navigateTo({
				url: '../shopping/shopping'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.u-wrap {
	height: calc(100vh);
	height: calc(100vh - var(--window-top));
	display: flex;
	flex-direction: column;
}
.u-menu-wrap {
	flex: 1;
	display: flex;
	overflow: hidden;
}
.u-tab-view {
	width: 200rpx;
	height: 100%;
}
.u-tab-item {
	height: 110rpx;
	background: #f6f6f6;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #444;
	font-weight: 400;
	line-height: 1;
}
::-webkit-scrollbar {
	display: none;
}
.leftScroll {
	width: 120rpx;
}
.leftBox {
	margin: 20rpx 0;
	padding: 0 20rpx;
	background-color: #f6f6f6;
}
.gridImages {
	width: 100%;
	height: 100%;
}
</style>
